<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-title">
      <h2>{{ title }}</h2>
    </div>

    <!-- 基本信息区域 -->
    <el-card class="box-card">
      <div class="detail-info">
        <div class="info-item">
          <span class="label">创建人：</span>
          <span class="content">{{ noticeS.createBy }}</span>
        </div>
        <div class="info-item">
          <span class="label">公告类型：</span>
          <span class="content">{{ noticeS.type==='1' ? '通知':'公告'}}</span>
        </div>
        <div class="info-item">
          <span class="label">创建时间</span>
          <span class="content">{{ noticeS.createTime }}</span>
        </div>
      </div>
    </el-card>

    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" class="detail-tabs">
      <el-tab-pane label="公告内容" name="notice">
        <div class="tab-content">
          <div class="content-block">
            <div v-html="noticeS.noticeContent "></div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { getNotice } from '../api/system/notice';
export default {
  name: 'WhResultsDetail',
  data() {
    return {
      id: '',//通知公告id
      title: '年度采购计划',
      activeTab: 'notice',
      noticeS:{
        createBy:'',
      }
    }
  },
  methods: {
    getRYNoticeInfo() {
      getNotice(this.id).then(res => {
        this.title=res.data.noticeTitle
        this.noticeS=res.data
      })
    }
  },

  mounted() {
    this.$store.dispatch("app/toggleSideBarHide", true);
    document.querySelector('.navbar').style.display = 'none';
    document.querySelector('.tags-view-container').style.display = 'none';
    //通知公告
    this.id =this.$route.params.id
    this.getRYNoticeInfo();
  },
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
}

.detail-info {
  padding: 20px;
}

.info-item {
  margin-bottom: 15px;
  line-height: 24px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  color: #606266;
}

.detail-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px;
}

.content-block {
  margin: 15px 0;
  line-height: 1.8;
}

.requirement-item {
  margin-bottom: 10px;
}

.operation-area {
  margin-top: 20px;
  text-align: center;
}

h3 {
  margin: 20px 0 10px;
  font-weight: bold;
  color: #303133;
}
</style>
